<template>
  <div>
    <el-scrollbar :height="height" ref="scrollbarRef">
      <el-row style="margin-bottom: 5px; justify-content: space-between;">
        <el-row>
          <p class="pinformation">单价列表</p>
          <p class="totalStyle">共 {{ form.basicMethodJcxmList.length }} 条数据</p>
        </el-row>
      </el-row>
      <el-table :data="form.basicMethodJcxmList">
        <el-table-column label="检测类别" align="center" prop="jclbName">
          <template #default="scope">
            <span v-html="transformation(scope.row.jclbName)"></span>
          </template>
        </el-table-column>
        <el-table-column label="检测项目" align="center" prop="jcxmName">
          <template #default="scope">
            <span v-html="transformation(scope.row.jcxmName)"></span>
          </template>
        </el-table-column>
        <el-table-column label="采样单价" align="center" prop="cyPrice">
          <template #default="scope">
            <el-input
              v-model="scope.row.cyPrice"
              clearable
              maxlength="100"
              oninput="value=value.replace(/^\D*([0-9]\d*\.?\d{0,2})?.*$/,'$1')"
              @blur="scope.row.cyPrice=$event.target.value"
              @change="submit(scope.row)"
            ></el-input>
          </template>
        </el-table-column>
        <el-table-column label="分析单价" align="center" prop="analysePrice">
          <template #default="scope">
            <el-input
              v-model="scope.row.analysePrice"
              clearable
              maxlength="100"
              oninput="value=value.replace(/^\D*([0-9]\d*\.?\d{0,2})?.*$/,'$1')"
              @blur="scope.row.analysePrice=$event.target.value"
              @change="submit(scope.row)"
            ></el-input>
          </template>
        </el-table-column>
        <el-table-column label="其他单价" align="center" prop="otherPrice">
          <template #default="scope">
            <el-input
              v-model="scope.row.otherPrice"
              clearable
              maxlength="100"
              oninput="value=value.replace(/^\D*([0-9]\d*\.?\d{0,2})?.*$/,'$1')"
              @blur="scope.row.otherPrice=$event.target.value"
              @change="submit(scope.row)"
            ></el-input>
          </template>
        </el-table-column>
        <el-table-column label="备注" align="center" prop="priceDesc">
          <template #default="scope">
            <el-input
              v-model="scope.row.priceDesc"
              @change="submit(scope.row)"
              clearable
              maxlength="100"
            ></el-input>
          </template>
        </el-table-column>
      </el-table>
    </el-scrollbar>
  </div>
</template>

<script setup>
import useMethodStore from "@/store/modules/method";
import { allListJclb } from "@/api/store/jclb";
import { listAllJcxm } from "@/api/store/jcxm";
import { priceSave } from "@/api/store/method";

const { proxy } = getCurrentInstance();
const methodStore = useMethodStore();
const methodDjForm = computed(() => methodStore.methodDjForm);
const form = ref({ basicMethodJcxmList: [] });
const typeList = ref([]);
const jcxmList = ref([]);

watch(methodDjForm, () => {
  form.value.basicMethodJcxmList = methodDjForm.value;
});

allListJclb().then((res) => {
  typeList.value = res.data;
});

listAllJcxm().then((res) => {
  jcxmList.value = res.data;
});

const submit = (row) => {
  if (!row.otherPrice) {
    row.otherPrice = ""
  }
  if (!row.cyPrice) {
    row.cyPrice = ""
  }
  if(!row.analysePrice) {
    row.analysePrice = ""
  }
  if(!row.priceDesc) {
    row.priceDesc = ""
  }
  priceSave(row).then((res) => {
    proxy.$modal.msgSuccess(res.msg);
  });
};

function transformation(row) {
  const a = proxy.getSupAndSub(row);
  return a;
}

const height = ref();

function getHeight() {
  nextTick(() => {
    height.value = proxy.getSubFileHeight(proxy, "scrollbarRef");
  });
}

onMounted(() => {
  nextTick(function () {
    getHeight();
    window.addEventListener("resize", getHeight);
  })
})

onUpdated(() => {
  nextTick(() => {
    getHeight()
  })
});
onBeforeUnmount(() => {
  window.removeEventListener("resize", getHeight);
});
</script>

<style></style>
